<template>
	<view class="page-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<view class="header-content">
				<view class="header-icon">👤</view>
				<view class="header-text">
					<text class="header-title">资料设置</text>
					<text class="header-subtitle">管理您的个人信息</text>
				</view>
			</view>
		</view>

		<!-- 用户头像区域 -->
		<view class="avatar-section">
			<view class="avatar-card">
				<view class="avatar-container">
					<template v-if="form.avatar">
						<up-image
							:src="form.avatar"
							width="120rpx"
							height="120rpx"
							shape="circle"
							mode="aspectFill"
						></up-image>
					</template>
					<template v-else>
						<view class="default-avatar">
							<up-icon name="account-fill" color="#FFFFFF" size="40"></up-icon>
						</view>
					</template>
					<view class="avatar-edit-btn" @click="handleAvatarEdit">
						<up-icon name="camera" color="#6FD719" size="16"></up-icon>
					</view>
				</view>
				<view class="user-greeting">
					<text class="greeting-text">你好，{{form.nickName || '用户'}}</text>
					<text class="greeting-desc">完善资料，享受更好的服务</text>
				</view>
			</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<view class="form-card">
				<view class="form-header">
					<up-icon name="edit-pen" color="#6FD719" size="20"></up-icon>
					<text class="form-title">个人信息</text>
				</view>

				<up-form labelPosition="left" :model="form" :rules="rules" ref="form1" labelWidth="120">
					<view class="form-section">
						<text class="section-title">基本信息</text>

						<up-form-item label="姓名" prop="nickName" borderBottom ref="item1">
							<up-input
								v-model="form.nickName"
								border="none"
								placeholder="请输入您的姓名"
								customStyle="color: #333; font-size: 30rpx;"
							></up-input>
							<template #right>
								<up-icon name="edit-pen" color="#999" size="14"></up-icon>
							</template>
						</up-form-item>

<!--						<up-form-item-->
<!--							label="手机"-->
<!--							prop="phone"-->
<!--							:rules="[-->
<!--								{ type: 'string', required: true, message: '请填写手机号', trigger: ['blur', 'change']},-->
<!--								{ pattern: /^1[3-9]\d{9}$/, message: '手机号码不正确', trigger: ['change','blur'] }-->
<!--							]"-->
<!--							borderBottom-->
<!--							ref="item2"-->
<!--						>-->
<!--							<up-input-->
<!--								v-model="form.phone"-->
<!--								border="none"-->
<!--								placeholder="请输入手机号码"-->
<!--								type="number"-->
<!--								maxlength="11"-->
<!--								customStyle="color: #333; font-size: 30rpx;"-->
<!--							></up-input>-->
<!--							<template #right>-->
<!--								<up-icon name="phone" color="#999" size="14"></up-icon>-->
<!--							</template>-->
<!--						</up-form-item>-->
					</view>

					<view class="form-actions">
						<up-button
							type="primary"
							size="large"
							@click="handlerUpdateInfo"
							customStyle="background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%); border: none; border-radius: 25rpx; box-shadow: 0 4px 16px rgba(111, 215, 25, 0.3);"
						>
							<up-icon name="checkmark" color="#fff" size="16" style="margin-right: 8rpx;"></up-icon>
							<text style="color: #fff; font-weight: 600;">保存修改</text>
						</up-button>
					</view>
				</up-form>
			</view>
		</view>

		<!-- 其他设置 -->
		<view class="settings-section">
			<view class="settings-card">
				<view class="settings-header">
					<up-icon name="setting" color="#6FD719" size="20"></up-icon>
					<text class="settings-title">其他设置</text>
				</view>

				<view class="settings-list">
					<view class="setting-item" @click="handlePrivacySettings">
						<view class="setting-left">
							<up-icon name="lock" color="#4CAF50" size="18"></up-icon>
							<text class="setting-text">隐私设置</text>
						</view>
						<up-icon name="arrow-right" color="#ccc" size="14"></up-icon>
					</view>

					<view class="setting-item" @click="handleNotificationSettings">
						<view class="setting-left">
							<up-icon name="bell" color="#FF9800" size="18"></up-icon>
							<text class="setting-text">消息通知</text>
						</view>
						<up-icon name="arrow-right" color="#ccc" size="14"></up-icon>
					</view>

					<view class="setting-item" @click="handleAbout">
						<view class="setting-left">
							<up-icon name="info-circle" color="#2196F3" size="18"></up-icon>
							<text class="setting-text">关于我们</text>
						</view>
						<up-icon name="arrow-right" color="#ccc" size="14"></up-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		updateUserInfo,
		getUserInfo
	} from '../../api/login';

	const form = ref({
		id: "",
		nickName: "",
		avatar: "",
		phone: ""
	})

	onMounted(() => {

		const userInfo = uni.getStorageSync("userInfo")
		form.value.id = userInfo.id;
		form.value.nickName = userInfo.nickName;
		form.value.avatar = userInfo.avatar;
		form.value.phone = userInfo.phone;

	})

	const handlerUpdateInfo = async () => {
		try {
			uni.showLoading({
				title: '保存中...',
				mask: true
			});

			await updateUserInfo(form.value);
			const resp = await getUserInfo(form.value.id);
			uni.setStorageSync("userInfo", resp);

			uni.hideLoading();
			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 2000
			});

			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} catch (error) {
			uni.hideLoading();
			uni.showToast({
				title: '保存失败，请重试',
				icon: 'none',
				duration: 3000
			});
		}
	}

	// 头像编辑
	const handleAvatarEdit = () => {
		uni.showActionSheet({
			itemList: ['拍照', '从相册选择'],
			success: (res) => {
				if (res.tapIndex === 0) {
					// 拍照
					chooseImage('camera');
				} else if (res.tapIndex === 1) {
					// 从相册选择
					chooseImage('album');
				}
			}
		});
	}

	// 选择图片
	const chooseImage = (sourceType) => {
		uni.chooseImage({
			count: 1,
			sourceType: [sourceType],
			success: (res) => {
				// 这里可以上传图片到服务器
				// 暂时直接使用本地路径
				form.value.avatar = res.tempFilePaths[0];
				uni.showToast({
					title: '头像已更新',
					icon: 'success'
				});
			}
		});
	}

	// 隐私设置
	const handlePrivacySettings = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		});
	}

	// 消息通知设置
	const handleNotificationSettings = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		});
	}

	// 关于我们
	const handleAbout = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		});
	}
</script>

<style lang="scss" scoped>
	.page-container {
		background: linear-gradient(180deg, #F8FAFB 0%, #FFFFFF 100%);
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 页面标题 */
	.page-header {
		background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%);
		padding: 60rpx 30rpx 40rpx;
		border-radius: 0 0 40rpx 40rpx;
		box-shadow: 0 4px 20px rgba(111, 215, 25, 0.2);
		position: relative;
		overflow: hidden;
	}

	.page-header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
		pointer-events: none;
	}

	.header-content {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.header-icon {
		font-size: 48rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-text {
		flex: 1;
	}

	.header-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #FFFFFF;
		margin-bottom: 8rpx;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 用户头像区域 */
	.avatar-section {
		padding: 40rpx 30rpx 20rpx;
	}

	.avatar-card {
		background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
		border-radius: 30rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.avatar-container {
		position: relative;
	}

	.default-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #6FD719 0%, #5BC016 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(111, 215, 25, 0.3);
		border: 3rpx solid #FFFFFF;
	}

	.avatar-edit-btn {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border: 2rpx solid #F5F7FA;
	}

	.user-greeting {
		flex: 1;
	}

	.greeting-text {
		display: block;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
	}

	.greeting-desc {
		font-size: 26rpx;
		color: #666;
	}

	/* 表单容器 */
	.form-container {
		padding: 20rpx 30rpx;
	}

	.form-card {
		background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
		border-radius: 30rpx;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.8);
		overflow: hidden;
	}

	.form-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 40rpx 30rpx 20rpx;
		border-bottom: 2rpx solid #F5F7FA;
	}

	.form-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	/* 表单区域 */
	.form-section {
		padding: 30rpx 0;
	}

	.section-title {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: #666;
		margin: 0 30rpx 20rpx;
		padding-left: 20rpx;
		border-left: 4rpx solid #6FD719;
	}

	/* 表单项样式重写 */
	:deep(.up-form-item) {
		padding: 20rpx 30rpx;
		background: transparent;

		.up-form-item__body {
			padding: 20rpx 0;
		}

		.up-form-item__body__left__content__label {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}

		.up-input {
			background: rgba(111, 215, 25, 0.03);
			border-radius: 15rpx;
			padding: 0 20rpx;
		}

		&:active {
			background: rgba(111, 215, 25, 0.02);
		}
	}

	/* 表单操作区域 */
	.form-actions {
		padding: 40rpx 30rpx;
	}

	/* 其他设置区域 */
	.settings-section {
		padding: 20rpx 30rpx;
	}

	.settings-card {
		background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
		border-radius: 30rpx;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.8);
		overflow: hidden;
	}

	.settings-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 40rpx 30rpx 20rpx;
		border-bottom: 2rpx solid #F5F7FA;
	}

	.settings-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.settings-list {
		padding: 20rpx 0;
	}

	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		transition: all 0.3s ease;

		&:active {
			background: rgba(111, 215, 25, 0.05);
		}
	}

	.setting-left {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.setting-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	/* 动画效果 */
	.avatar-card,
	.form-card,
	.settings-card {
		animation: fadeInUp 0.6s ease-out;
	}

	.avatar-card { animation-delay: 0.1s; }
	.form-card { animation-delay: 0.2s; }
	.settings-card { animation-delay: 0.3s; }

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式设计 */
	@media screen and (max-width: 750rpx) {
		.avatar-section,
		.form-container,
		.settings-section {
			padding-left: 20rpx;
			padding-right: 20rpx;
		}

		.avatar-card {
			flex-direction: column;
			text-align: center;
			gap: 20rpx;
		}

		.form-header,
		.settings-header {
			padding: 30rpx 20rpx 15rpx;
		}

		.section-title {
			margin: 0 20rpx 15rpx;
		}

		:deep(.up-form-item) {
			padding: 15rpx 20rpx;
		}

		.form-actions {
			padding: 30rpx 20rpx;
		}
	}
</style>